var arr = [];
var cartArr = [];
window.onload = function() {
	showGoodsList(getLocalGoodsListData())
	render(getLocalCartData());
}
//获取本地商品列表数据
function getLocalGoodsListData() {
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}
//获取本地购物车数据
function getLocalCartData() {
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
	return cartArr;
}
//将商品列表数据渲染到页面上
function showGoodsList() {
	var ul_list = document.querySelector(".list-ul");
	var str = "";
	for(var i = 0; i < arr.length; i++) {
		str += `
				<li date-id="${arr[i].goodsid}">
					<img src="${arr[i].image}" />
					<div class="shopName">
						${arr[i].name}"
					</div>
					<div class="shopPrice">
						${arr[i].price}"
					</div>
					<button type="button" id="btn" onclick="addCart('${arr[i].goodsid}', '${arr[i].image}', '${arr[i].name}', '${arr[i].price}')">加入购物车</button>
				</li>
		`;
	}
	ul_list.innerHTML = str;
}

function addCart(goodsId, img, name, price) {
	var count = 1;
	var xiaoji = price / 1 * count;
	var obj = {
		id: goodsId,
		src: img,
		title: name,
		price: price,
		count: count,
		xiaoji: xiaoji,
		time: new Date().toLocaleString()
	}
	addData(obj);
}
//添加数据到购物车并渲染
function addData(obj) {
	carArr = getLocalCartData();
	var result = cartArr.some(function(item, index) {
		return item.id == obj.id;
	})
	if(result) {
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
//渲染购物车数据到购物车列表
function render(cartArr) {
	var tbody = document.querySelector("tbody");
	var str = '';
	var sum = 0;
	for(var i = 0; i < cartArr.length; i++) {
		str += `
			<tr>
				<td>
					<input type="checkbox" name="" class="danxuan" value="" data-id="${cartArr[i].id}"  />
				</td>
				<td>
					<img src="${cartArr[i].src}"/><br />
					<span>${cartArr[i].title}</span>
				</td>
				<td>
					<button type="button" onclick="jian(${cartArr[i].id})">-</button>
					<input type="text" name="" id="" value="${cartArr[i].count}" class="count" />
					<button type="button" onclick="jia(${cartArr[i].id})">+</button>
				</td>
				<td>
					<span>${cartArr[i].price}</span>
				</td>
				<td>
					<span>${cartArr[i].xiaoji}</span>
				</td>
				<td>
					<button type="button" onclick="del(${cartArr[i].id})">删除</button>
				</td>
				<td>
					${cartArr[i].time}
				</td>
			</tr>
		`;
		sum = sum / 1 + cartArr[i].xiaoji / 1;
	}
	tbody.innerHTML = str;
}

//减功能
function jian(id) {
	cartArr = getLocalCartData();
	cartArr.forEach(function(item, index) {
		if(item.id == id) {
			if(item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2)
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

function jia(id) {
	cartArr = getLocalCartData();
	cartArr.forEach(function(item, index) {
		if(item.id == id) {
			if(item.id == id) {
				item.count++;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
//删除
function del(id) {
	cartArr = getLocalCartData();
	for(var i = 0; i < cartArr.length; i++) {
		if(id == cartArr[i].id) {
			cartArr.splice(i, 1)
		}
	}
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}
//全选功能
var quanxuan = document.querySelector("#quanxuan");
quanxuan.onclick = function() {
	var danxuanList = document.querySelectorAll(".danxuan");
	for(var i = 0; i < danxuanList.length; i++) {
		danxuanList[i].checked = quanxuan.checked;
	}
}
//删除选中商品
var delChecked = document.getElementById("delChecked");
delChecked.onclick = function() {
	cartArr = getLocalCartData();
	var danxuanList = document.querySelectorAll("danxuan:checked")
	for(var i = 0; i < danxuanList.length; i++) {
		cartArr.forEach(function(item, index) {
			if(item.id == danxuanList[i].getAttribute("data-id")) {
				cartArr.splice(index, 1);
			}
		})
	}
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}